<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
    }
    ul li {
      display: block;
      margin-top: 5px;
    }
    body.authenticated .anonymous {
      display: none;
    }
    body.authenticated .authenticated {
      display: block;
    }
    body.authenticated .authenticated.inline {
      display: inline;
    }
    body.anonymous .anonymous {
      display: block;
    }
    body.anonymous .authenticated {
      display: none;
    }
    .sub-content {
      font-size: 10pt;
    }
    #pager {
      display: block;
      margin: 20px;
    }
    #pager > div {
      display: inline-block;
      margin: 8px 5px;
      cursor: pointer;
    }
  </style>
  <link href="/css/app.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="/js/jquery-1.11.3.min.js"></script>
  <script src="/js/jquery-ajax-ext.js"></script>
  <script src="/js/jquery-load-template.min.js"></script>
</head>
<body>
<h1>Simple BBS</h1>
<div class="authenticated">
  <a href="/form">Publish message</a> |
  <a href="/me">My profile</a> |
  <a href="/logout">Logout</a>
</div>
<a class="anonymous" href="/~/social/start?provider=github">Login with Github</a>
<ul id="list">
</ul>

<div id="pager">
  <div id="go-first" data-page="0">&lt;&lt;</div>
  <div id="go-prev" data-page="-1">&lt;</div>
  <div id="go-next" data-page="+1">&gt;</div>
  <div id="go-last" data-page="last">&gt;&gt;</div>
</div>

<script type="text/html" id="template">
<li>
  <div class="subject" >
    <a class="view-link" data-alt="id" data-content="subject" title="Click to see details"></a>
  </div>
  <div class="sub-content">
    <span class="author" data-content="author"></span>
    <span class="timestamp" >
      by <span data-content="timestamp"></span>
    </span>
    <span class="authenticated inline">
      <a class="edit-link" data-alt="id">Edit</a>
    </span>
  </div>
</li>
</script>

<script>

  var _page = 0, _max = -1;

  $.getJSON("/me", function() {
      $('body').addClass("authenticated").removeClass("anonymous")
  }).error(function() {
      $('body').addClass("anonymous").removeClass("authenticated")
  });

  function loadData() {
      $.getJSON("/message?page=" + _page, function(data) {
          var list = data.list;
          var max = data.max;
          $('#list').loadTemplate($('#template'), list);
          $('.edit-link').each(function(idx, me) {
              me.href = "/form/" + $(me).attr('alt');
          })
          $('.view-link').each(function(idx, me) {
              me.href = "/message/" + $(me).attr('alt');
          });
          _max = max;
      })
  }

  $('#pager > div').on('click', function() {
      $me = $(this);
      var pg = $me.data('page');
      if ('-1' === pg || -1 == pg) {
          _page--;
      }
      if ('+1' == pg) {
          _page++
      }
      if ('last' == pg) {
          _page = _max;
      }
      if (_page < 0) {
          _page = 0;
      }
      if (_page > _max) {
          _page = _max;
      }
      loadData();
  });

  loadData();

</script>